<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>vue2.0-router</title>
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <script type="text/javascript" src="js/vue2.js"></script>
    <script src="bower_components/vue-router/dist/vue-router2.min.js"></script>
    <style>
        .router-link-active{
            font-size: 20px;
            color: #f00;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        var Home = {
            template:"<h2>我是首页</h2>"
        };
         var News = {
            template:`
                <div>
                    <h2>新闻分类：</h2>
                    <div>
                        <ul>
                            <li><router-link to="/news/yule/num/1">娱乐新闻</router-link></li>
                            <li><router-link to="/news/fazhi/num/2">法制新闻</router-link></li>
                            <li><router-link to="/news/zongyi/num/3">综艺新闻</router-link></li>
                        </ul>
                    </div>
                    <div>
                        <router-view></router-view>
                    </div>    
                </div>
            `
        };
        var NewDetail = {
            template:'<h1>{{$route.params}}</h1>'
        }
        // 配置路由
        const routes = [
            {path:"/home",component:Home},
            {
                path:"/news",
                component:News,
                children:[ 
                    {path:":type/num/:num",component:NewDetail} //path里第一个type 最后一个num自定义的
                ]
            },
            {path:"*",redirect:"/home"}
        ];
        //生成路由实例
        const router=new VueRouter({
            routes:routes
        });
        //绑定
        window.onload = function(){
            new Vue({
                router:router,
                // el:"#box"
                methods: {
                    push(){
                        router.push({path:"/home"}); //会增加一个历史记录
                    },
                    replace(){
                        router.replace({path:"/news"}) //不会增加记录
                    }
                }
            }).$mount("#box");
        }
    
    </script>
</head>
<body>

    <div id="box">
        <input type="button"  value="添加一个路由" @click="push()">
        <input type="button"  value="替换一个路由" @click="replace()">
        <div>
            <router-link to="/home">首页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">  <!--谁运动把谁放到transition里 -->
                <router-view></router-view>
           </transition>
        </div>
    </div>
    
</body>
</html>